<template>
  <!--插值语法-->
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ hello }}</p>
  <!-- 插值语法只能输出表达式 {{  }}只能把数据插值为纯文本，而不是html-->
   <!-- 若想插入html需要用v-html指令 -->
    <!--只能把数据插值为纯文本，而不是-->
    <div>
      <p>{{ rawHtml }}</p>
      <p v-html="rawHtml"></p>
      <br>
      <hr>
      <h3>指令</h3>
      <!-- {{  }}用于标签内容，v-指令用于标签属性 -->
      <!-- v-bind:可以简写为: -->
      <!-- 动态绑定css和id属性 -->
      <p v-bind:class="dynamicClass" :id="dynamicId">测试</p>
      <!-- 动态绑定多个属性 -->
      <!-- 可以一下子拥有class属性和id属性 -->
      <p v-bind="obj">测试</p>
    </div>
    
</template>

<script  name="helloWorld" lang="js">
  export default{
    data(){
      return{
        msg:"神奇的语法",
        hello:"hello world",
        rawHtml:"<a href = 'https://itbaizhan.com'>百战程序员</a>",
        dynamicClass:"appclass",
        danamicId:"appid",
        obj:{
          class:"appclass",
          id:"appid"
        }
      }
    }
  }

</script>